﻿@{
    ViewBag.Title = "按钮组";
}

<h2>按钮组</h2>

<div class="btn-toolbar" role="toolbar">
    <div class="btn-group btn-group-lg" role="group">
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">middle</button>
        <button type="button" class="btn btn-default">right</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">middle</button>
        <button type="button" class="btn btn-default">right</button>
    </div>
    <div class="btn-group btn-group-sm" role="group">
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">middle</button>
        <button type="button" class="btn btn-default">right</button>
    </div>
    <div class="btn-group btn-group-xs" role="group">
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">middle</button>
        <button type="button" class="btn btn-default">right</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">left</button>
        <button type="button" class="btn btn-default">middle</button>
        <button type="button" class="btn btn-default">right</button>
    </div>
    <div class="btn-group-vertical" role="group">
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
        </button>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                下拉菜单
                <span class="caret">
                </span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="btn-group btn-group-justified" role="group">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">left</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">middle</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">right</button>
    </div>
</div>